<template>
  <div class="home">
    <div v-if="initialize" class="serach">
      <span class="van-ellipsis" @click="jumptocity(nowcity)"
        >{{ nowcity.slice(0, 3) }}<van-icon name="arrow-down"
      /></span>
      <input
        ref="searchinput"
        type="text"
        placeholder="请输入小区名称、街道、商圈等"
        :class="userRole == 1 ? 'input' : 'input2'"
        @click="jumptosearch"
      />
      <img class="icons" src="@/assets/serch.png" alt="" />
      <span class="sign" @click="goCan" v-if="userRole == 1">
        <img src="@/assets/qiandao.png" alt="" width="22px" height="20px" />
        <div>签到</div>
      </span>
    </div>
    <div v-if="initialize" style="height: 70px" />
    <div class="menu">
      <div class="part">
        <div class="" @click="jumptorent">
          <img :src="nurl1" />
          <span>房屋直租</span>
        </div>
        <div class="" @click="jumptobuy">
          <img :src="nurl2" />
          <span>二手房</span>
        </div>
        <div class="" @click="jumptonew">
          <img :src="nurl3" />
          <span>新房</span>
        </div>
        <div class="" @click="toQA">
          <img :src="nurl5" />
          <span>暖暖问答</span>
        </div>
        <div class="" @click="jumotoprocess">
          <img :src="nurl4" />
          <span>交易流程</span>
        </div>
        <!-- <div class="" @click="showreward">
            <img src="@/assets/indexicon05.png">
            <span>奖励任务</span>
          </div> -->
      </div>
    </div>
    <van-swipe class="swiperimg" :autoplay="3000" indicator-color="#fff">
      <van-swipe-item v-for="(item, index) in banner" :key="index">
        <img :src="item.url" />
      </van-swipe-item>
    </van-swipe>
    <div id="ad" style="width: 100%; height: 0px" />
    <div v-if="initialize" class="show">
      <div class="news" @click="goNewList">
        <div>
          <div>暖暖</div>
          <div>新闻</div>
        </div>
        <div>|</div>
        <div>
          <van-swipe
            class="my-swipe"
            :autoplay="3000"
            vertical
            :show-indicators="false"
          >
            <van-swipe-item v-for="(item, index) in news" :key="index">
              <div>{{ item.title }}</div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class="activity">
        <div class="rpart">
          <div class="" @click="toGraduation">
            <img
              :src="aurl"
              alt=""
              style="box-shadow: 0 2px 8px -1px #f0f0f0 !important"
            />
          </div>
          <div class="" @click="tobuyshow">
            <img
              :src="aurl2"
              alt=""
              style="box-shadow: 0 2px 8px -1px #f0f0f0 !important"
            />
          </div>
        </div>
      </div>
      <div class="depart">
        <!-- <div class="">推荐房源</div> -->
        <div class="">
          <!-- <span :class="[rant ? 'active' : '']" @click="change1">直租</span>
          <span :class="[!rant ? 'active' : '']" @click="change2">买卖</span> -->
          <!-- <span @click="change3">推荐房源</span> -->
          <span
            data-index="0"
            :class="cur == 0 ? 'active' : ''"
            @click="change1"
            ><div>房屋直租</div>
            <div v-if="cur == 0" style="text-align: center">
              <img src="@/assets/tiao.png" alt="" width="60%" />
            </div>
          </span>
          <span
            data-index="1"
            :class="cur == 1 ? 'active' : ''"
            @click="change2"
          >
            <div>二手房</div>
            <div v-if="cur == 1" style="text-align: center">
              <img src="@/assets/tiao.png" alt="" width="60%" />
            </div>
          </span>
          <span
            data-index="2"
            :class="cur == 2 ? 'active' : ''"
            @click="change4"
          >
            <div>新房</div>
            <div v-if="cur == 2">
              <img src="@/assets/tiao.png" alt="" width="60%" />
            </div>
          </span>
        </div>
      </div>
      <div v-show="show1" class="housepart">
        <div v-show="houselist.length != 0">
          <div
            v-for="(item, index) in houselist"
            :key="index"
            class="house"
            @click="jumptodetail(item.roomId, item)"
          >
            <van-image
              width="121px"
              height="112px"
              lazy-load
              :src="item.image"
              fit="cover"
              radius="5px"
            />
            <div class="intrduce">
              <div class="title1">{{ item.subdistrict }}</div>
              <div class="title2">
                <span>{{ item.rentalWay }}</span
                >|<span>{{ item.houseType }}</span
                >|<span>{{ item.roomAcre }}</span
                >|<span>{{ item.floor }}</span>
              </div>
              <div class="title2">
                {{ item.address }}
              </div>
              <div class="tips">
                <span>{{ item.rentalWay }}</span>
                <span v-if="item.paymentMethod">{{ item.paymentMethod }}</span>
                <span>{{ item.houseType }}</span>
              </div>
              <div class="title3">{{ item.price }}</div>
            </div>
          </div>
        </div>

        <div v-show="houselist.length == 0 && !rentloading" class="nohouse">
          <img src="@/assets/nohouse.png" alt="" />
          <div>房源上新中...</div>
        </div>
        <!-- <div v-show="rentloading && currentPage < 5" class="nohouse">
          <img src="@/assets/nohouse.png" alt="" />
          <div>加载中...</div>
        </div> -->
        <div class="bottomline" @click="goRent">查看更多</div>
      </div>
      <div v-show="show2" class="housepart">
        <div v-show="buyhouselist.length != 0">
          <div
            v-for="(item, index) in buyhouselist"
            :key="index"
            class="house2"
            @click="jumptobuydetail(item.houseId, item)"
          >
            <van-image
              width="121px"
              height="112px"
              lazy-load
              :src="item.houseImage"
              fit="cover"
              radius="5px"
            />
            <div class="intrduce">
              <div class="title1">{{ item.subdistrict }}</div>
              <div class="title2">
                <span>{{ item.houseType }}</span
                >|<span>{{ item.coveredArea }}m<span class="up">2</span></span
                >|<span>{{ item.floor }}</span>
              </div>
              <div class="tips">
                <span v-if="item.address">{{ item.address }}</span>
                <!-- <span v-show="item.aspectType">{{ item.aspectType }}</span>
                <span v-show="item.decoration">{{ item.decoration }}</span>
                <span v-show="item.houseGenre">{{ item.houseGenre }}</span> -->
              </div>
              <div v-show="item.listedPrice != '面议'" class="title3">
                {{ item.listedPrice }}万<span>
                  <span
                    >{{
                      ((item.listedPrice * 10000) / item.coveredArea).toFixed(2)
                    }} </span
                  >元/m<span class="up">2</span></span
                >
              </div>
              <div v-show="item.listedPrice == '面议'" class="title3">
                {{ item.listedPrice }}
              </div>
            </div>
          </div>
        </div>

        <div v-show="buyhouselist.length == 0 && !buyloading" class="nohouse">
          <img src="@/assets/nohouse.png" alt="" />

          <div>房源上新中...</div>
        </div>
        <!-- <div v-show="buyloading && currentPage < 5" class="nohouse">
          <img src="@/assets/nohouse.png" alt="" />
          <div>加载中...</div>
        </div> -->
        <div class="bottomline" @click="goSecond">查看更多</div>
      </div>
      <div v-show="show4" class="newup">
        <div
          v-for="item in newhouselist"
          :key="item.index"
          class="house"
          @click="jumptonewdetail(item.houseId, item)"
        >
          <van-image
            width="121px"
            height="112px"
            lazy-load
            :src="item.image"
            fit="cover"
            radius="5px"
          />
          <div class="intrduce">
            <span class="title1">{{ item.subdistrict }}</span>
            <span class="title2">
              <span>年限:{{ item.propertyTerm }}</span>
              <span v-show="item.plotRatio"
                >容积率:{{ item.plotRatio
                }}<span v-show="item.plotRatio.length == '1'">.0</span></span
              >
              <span v-show="item.greeningRate"
                >绿化率:{{ item.greeningRate }}</span
              >
            </span>
            <span class="tips">
              <span v-for="i in item.houseLabel" :key="i.index">{{ i }}</span>
            </span>
            <span v-show="item.sellingPrice != '0元/m²'" class="title3">{{
              item.sellingPrice
            }}</span>
            <span v-show="item.sellingPrice == '0元/m²'" class="title3"
              >待定</span
            >
          </div>
        </div>
        <div v-show="newhouselist.length == '0' && !newloading" class="nohouse">
          <img src="@/assets/nohouse.png" alt="" />
          <div>暂无房源</div>
        </div>
        <!-- <div v-show="newloading && currentPage < 5" class="nohouse">
          <img src="@/assets/nohouse.png" alt="" />
          <div>加载中...</div>
        </div> -->
        <div class="bottomline" @click="goNew">查看更多</div>
      </div>
    </div>
    <div v-if="!initialize" class="first">
      <swiper class="swiper firstswiper" :options="swiperOption">
        <swiper-slide>
          <img :src="furl" alt="" />
          <div class="passfirst" @click="beginIndex">跳过</div>
        </swiper-slide>
        <swiper-slide>
          <img :src="furl2" alt="" />
          <div class="passfirst" @click="beginIndex">跳过</div>
        </swiper-slide>
        <swiper-slide v-if="furl4 != ''">
          <img :src="furl4" alt="" />
          <div class="passfirst" @click="beginIndex">跳过</div>
        </swiper-slide>
        <swiper-slide>
          <img :src="furl3" alt="" />
          <div class="outfirst" @click="beginIndex">开始体验</div>
        </swiper-slide>
        <div slot="pagination" class="swiper-pagination" />
      </swiper>
    </div>
    <van-popup v-model="show" closeable>
      <div class="updateTips">
        <img src="../../assets/versionbgimg.png" alt="" />
        <div>
          <div>新版本升级!</div>
          <div>当前版本:{{ userVersion }}</div>
          <div>新版本:{{ version }}</div>
          <div>
            <button @click="update">马上更新</button>
          </div>
        </div>
      </div>
    </van-popup>

    <div class="fixImg">
      <img
        src="@/assets/indexSign.png"
        alt=""
        @click="goCan"
        v-if="userRole == 1"
      />
    </div>
  </div>
</template>
<script>
import { getHouselist, getBuyhouselist, newHousesearch } from "@/apis/house.js";
import { getVersion } from "@/apis/user.js";
import { baseUtils } from "@/utils/baseUtils";
import { mapGetters } from "vuex";
import { _local, _session } from "@/utils/storage";
import { getNews } from "@/apis/buy.js";
import { getCity } from "@/apis/city";
import {
  getInitialize,
  setInitialize,
  getLocationPermissions,
  setLocationPermissions,
  getHouseList,
  setHouseList,
  getHouseListBuy,
  setHouseListBuy,
  setHouseListNew,
  setGeolocation,
  getChooseCity,
  getSecret,
  getUserId,
  getHouseListNew,
  setPosition,
} from "@/utils/auth";
import { getCityCode } from "@/apis/city";

export default {
  data() {
    return {
      userRole: 0,
      nurl1: "",
      nurl2: "",
      nurl3: "",
      nurl4: "",
      nurl5: "",
      banner: [],
      aurl: "",
      aurl2: "",
      furl: "",
      furl2: "",
      furl3: "",
      furl4: "",
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      cur: 0,
      cityCode: "",
      news: [],
      nowcity: "定位中",
      houselist: [],
      buyhouselist: [],
      newhouselist: [],
      // totalhouselist:[],
      rant: true,
      rentloading: true,
      buyloading: true,
      newloading: true,
      images: [],
      currentPage: "1",
      perPage: "10",
      initialize: null,
      show: false,
      showupdate: true,
      swiperOption: {
        slidesPerView: 1,
        spaceBetween: 10,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
      version: "",
      userVersion: "",
      declare: [],
      downloadadress: "",
      adata: null,
    };
  },
  computed: {
    ...mapGetters(["role"]),
  },
  watch: {
    cityCode: {
      handler(value, oldValue) {
        if (baseUtils.isEmpty(oldValue)) {
          this.getHouse();
        }
      },
      immediate: true,
    },
    show1(newValue, oldValue) {
      if (newValue == true) {
        this.show2 = false;
        this.show4 = false;
      }
    },
    show2(newValue, oldValue) {
      if (newValue == true) {
        this.show1 = false;
        this.show4 = false;
      }
    },
    show4(newValue, oldValue) {
      if (newValue == true) {
        this.show2 = false;
        this.show1 = false;
      }
    },
  },
  created() {
    const userId = getUserId();
    if (userId) {
      this.$store.dispatch("manage/getInfo", { userId: userId }).then((res) => {
        console.log("个人信息", res);
        this.userRole = res.result.role;
        _local.set("user", JSON.stringify(res));
      });
    }
    this.show1 = true;
    this.initialize = getInitialize();
    const chooseCity = getChooseCity();
    // 已完成初始化状态
    if (this.initialize) {
      if (baseUtils.isEmpty(chooseCity)) {
        this.location();
      } else {
        this.nowcity = chooseCity.city;
        _local.set("city", this.nowcity);
        this.cityCode = chooseCity.cityCode;
        _local.set("cityCode", chooseCity.cityCode);
        _local.set("adCode", chooseCity.adCode);
      }
    }

    if (_session.get("showupdate")) {
      this.showupdate = false;
    }

    this.getver();
    this.getBanner();
    this.getActivity();
    this.getFirst();
    this.getNavIcons();
  },
  mounted() {
    setTimeout(() => {
      this.getNewsList();
    }, 1000);
  },
  activated() {
    const userId = getUserId();
    if (userId) {
      this.$store.dispatch("manage/getInfo", { userId: userId }).then((res) => {
        console.log("个人信息", res);
        this.userRole = res.result.role;
        _local.set("user", JSON.stringify(res));
      });
    }
    window.addEventListener("scroll", this.showScroll);
    // this.currentPage=1
    // this.show1 && this.getHouse()
    // this.show2 && this.getBuyhouse()
    // this.show4 && this.getnewHouselist()
  },
  deactivated() {
    window.removeEventListener("scroll", this.showScroll);
  },
  methods: {
    // goAnnouncement(i) {
    //   if (i == 3) {
    //     this.$router.push("/Announcement");
    //   }
    // },
    getNavIcons() {
      fetch(`https://api.nuanuan.net/index/banner?type=${6}`, {
        method: "GET",
      })
        .then((res) => res.json())
        .then((res) => {
          console.log("导航图标", res);
          this.nurl1 = res.data[0].url;
          this.nurl2 = res.data[1].url;
          this.nurl3 = res.data[2].url;
          this.nurl4 = res.data[3].url;
          this.nurl5 = res.data[4].url;
        });
    },
    getFirst() {
      fetch(`https://api.nuanuan.net/index/banner?type=${3}`, {
        method: "GET",
      })
        .then((res) => res.json())
        .then((res) => {
          console.log("首次进入图片", res);
          this.furl = res.data[0].url;
          this.furl2 = res.data[1].url;
          this.furl3 = res.data[2].url;
          if (res.data[3]) {
            this.furl4 = res.data[3].url;
          }
        });
    },
    getActivity() {
      fetch(`https://api.nuanuan.net/index/banner?type=${2}`, {
        method: "GET",
      })
        .then((res) => res.json())
        .then((res) => {
          console.log("活动图", res);
          this.aurl = res.data[0].url;
          this.aurl2 = res.data[1].url;
        });
    },
    getBanner() {
      fetch("https://api.nuanuan.net/index/banner", {
        method: "GET",
      })
        .then((res) => res.json())
        .then((res) => {
          console.log("轮播图", res);
          this.banner = res.data;
        });
    },
    goNew() {
      this.$router.push("/newindex");
    },
    goSecond() {
      this.$router.push("/buyindex");
    },
    goRent() {
      this.$router.push("/rentindex");
    },
    toGraduation() {
      this.$router.push("/Graduation");
    },
    goNewList() {
      this.$router.push("/newslist");
    },
    getNewsList() {
      getNews({
        currentPage: 1,
        perPage: 10,
        // citycode:this.citycode
      }).then((res) => {
        if (res.code === 200 || res.code === 201) {
          this.news = res.result.list;
        }
      });
    },
    jumptonewdetail(e, item) {
      const list = getHouseListNew();
      for (let i = 0; i < list.length; i++) {
        if (list[i].houseId === item.houseId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      setHouseListNew(list);
      this.$router.push({ path: "/newhousedetail", query: { newHouseId: e } });
    },
    goCan() {
      const userId = getUserId();
      if (userId) {
        this.$store.dispatch("manage/getInfo", { userId: userId });
        if (_local.get("role") === 1) {
          this.$router.push("/Calendar");
        } else {
          this.$dialog.alert({
            title: "温馨提示",
            message: "目前签到功能只支持租客，如有问题，请咨询客服",
            confirmButtonColor: "#45b7cb",
            theme: "round-button",
            messageAlign: "left",
          });
        }
      } else {
        this.$router.push({ path: "/login" });
      }
      const secret = getSecret();
      if (secret) {
        this.username = secret.username;
        this.avatar = secret.avatar;
      }
    },
    goNews() {
      this.$router.push("/news");
    },
    jumptocity(e) {
      this.$router.push({ path: "/city", query: { city: e } });
    },
    jumptodetail(e, item) {
      const role = this.role;
      if (role === 1 || role === 5) {
        const list = getHouseList() ? getHouseList() : [];
        for (let i = 0; i < list.length; i++) {
          if (list[i].roomId === item.roomId) {
            list.splice(i, 1);
          }
        }
        list.unshift(item);
        setHouseList(list);
      }
      this.$router.push({ path: "/housedetail", query: { roomId: e } });
    },
    jumptobuydetail(e, item) {
      const list = getHouseListBuy();
      for (let i = 0; i < list.length; i++) {
        if (list[i].houseId === item.houseId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      setHouseListBuy(list);
      this.$router.push({ path: "/buyhousedetail", query: { houseId: e } });
    },
    jumptorent() {
      this.$router.push({ path: "/rentindex" });
    },
    jumptobuy() {
      this.$router.push({ path: "/buyindex" });
    },
    jumptonew() {
      this.$router.push({ path: "/newindex" });
    },
    jumptosearch() {
      this.$router.push({ path: "/search" });
      setTimeout(() => {
        window.location.reload();
      }, 100);
    },
    jumotoprocess() {
      this.$router.push({ path: "/process" });
    },
    toQA() {
      this.$router.push({ path: "/qa" });
    },
    showreward() {
      this.$dialog
        .alert({
          message: "奖励任务更新中，敬请期待...",
          confirmButtonColor: "#45b7cb",
          theme: "round-button",
          messageAlign: "left",
        })
        .then(() => {});
    },

    showScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (
        scrollTop + windowHeight >=
        scrollHeight - 20
        // this.rant &&
        // this.rentloading
        // this.currentPage <= 5
      ) {
        // this.currentPage++;

        getHouselist({
          citycode: this.cityCode,
          currentPage: this.currentPage,
          perPage: this.perPage,
        }).then((response) => {
          // console.log(response)
          if (response.result.list && response.result.list.length !== 10) {
            this.rentloading = false;
          }
          this.houselist = response.result.list;
          if (this.show1) {
            this.rentloading = false;
            this.goRent();
          }
        });
      }
      if (
        scrollTop + windowHeight >=
        scrollHeight - 20
        // !this.rant &&
        // this.buyloading
        // this.currentPage <= 5
      ) {
        // this.currentPage++;
        const chooseCity = getChooseCity();
        if (chooseCity) {
          getBuyhouselist({
            citycode: this.cityCode,
            currentPage: 1,
            perPage: this.perPage,
          }).then((response) => {
            if (response.result.list && response.result.list.length !== 10) {
              this.buyloading = false;
            }
            this.buyhouselist = response.result.list;
            if (this.show2) {
              this.buyloading = false;
              this.goSecond();
            }
          });
        }
      }
      if (
        scrollTop + windowHeight >= scrollHeight - 20 &&
        this.newloading
        // this.currentPage <= 5
      ) {
        // this.currentPage++;
        newHousesearch({
          cityCode: this.cityCode,
          currentPage: this.currentPage,
          perPage: this.perPage,
        }).then((response) => {
          if (response.result.list.length !== 10) {
            this.newloading = false;
          }
          this.newhouselist = response.result.list;
          if (this.show4) {
            this.newloading = false;
            this.goNew();
          }
        });
      }
    },
    tobuyshow() {
      this.$router.push({
        path: "/graborder",
        query: { city: this.nowcity },
      });
    },
    getHouse() {
      getHouselist({
        citycode: this.cityCode,
        currentPage: this.currentPage,
        perPage: this.perPage,
      }).then((response) => {
        if (response.code === 200 || response.code === 201) {
          console.log(response);
          this.rentloading = false;
          this.houselist = response.result.list;
          if (this.houselist.length === 10) {
            this.rentloading = true;
          }
        }
      });
    },
    getBuyhouse() {
      getBuyhouselist({
        citycode: this.cityCode,
        currentPage: this.currentPage,
        perPage: this.perPage,
      }).then((response) => {
        this.buyhouselist = response.result.list;
        if (this.buyhouselist.length === 10) {
          this.buyloading = true;
        }
      });
    },
    getnewHouselist() {
      newHousesearch({
        currentPage: this.currentPage,
        perPage: this.perPage,
        cityCode: this.cityCode,
      }).then((res) => {
        // console.log("新房", res);
        if (res.code === 201) {
          this.newloading = false;
          this.newhouselist = res.result.list;
          if (this.newhouselist.length === 10) {
            this.newloading = true;
          }
        }
      });
    },
    beginIndex() {
      this.location();
      this.initialize = 1;
      setInitialize(1);
    },
    change1() {
      this.cur = 0;
      this.show1 = true;
      this.show2 = false;
      this.show3 = false;
      this.show4 = false;
      this.currentPage = 1;
      this.getHouse();
    },
    change2() {
      // this.rant = false;
      this.cur = 1;
      this.show1 = false;
      this.show2 = true;
      this.show3 = false;
      this.show4 = false;
      this.currentPage = 1;
      this.getBuyhouse();
    },
    change4() {
      this.cur = 2;
      this.show1 = false;
      this.show2 = false;
      this.show3 = false;
      this.show4 = true;
      this.currentPage = 1;
      this.getnewHouselist();
    },
    getver() {
      const _this = this;
      getVersion().then((res) => {
        console.log("getVersion:", JSON.stringify(res));
        const ename = baseUtils.allegeDevice();
        _this.$plusReady(() => {
          const phoneversion = plus.runtime.version;
          this.userVersion = phoneversion;
          // let phoneversion = "5.0.0";
          if (ename === "android") {
            _this.downloadadress = res.result.list[0].address;
            _this.version = res.result.list[0].version;
            _this.declare = res.result.list[0].declare.split("&");
            const androidversion = res.result.list[0].version;
            const isOpen = res.result.list[0].is_open;
            if (isOpen == 1) {
              if (androidversion != phoneversion && _this.showupdate) {
                _this.show = true;
                _session.set("showupdate", 1);
              }
            }
          } else if (ename === "ios") {
            _this.downloadadress = res.result.list[1].address;
            _this.version = res.result.list[1].version;
            _this.declare = res.result.list[1].declare.split("&");
            const iosversion = res.result.list[1].version;
            const isOpen = res.result.list[1].is_open;
            if (isOpen == 1) {
              if (iosversion != phoneversion && _this.showupdate) {
                _this.show = true;
                _session.set("showupdate", 1);
              }
            }
          }
        });
      });
    },

    update() {
      window.location.href = this.downloadadress;
      this.show = false;
      this.$toast("正在下载更新");
    },
    tored() {
      this.$dialog
        .alert({
          message: "即将上线,敬请期待",
          confirmButtonColor: "#45b7cb",
          theme: "round-button",
          messageAlign: "left",
        })
        .then(() => {});
    },

    location() {
      const _this = this;
      const device = baseUtils.allegeDevice();
      _local.set("device", device);
      _this.$plusReady(() => {
        if (device === "android") {
          // 生产厂家
          const brand = plus.device.vendor;
          // 设备型号
          const model = plus.device.model;

          console.log("brand", JSON.stringify(brand));
          console.log("model", JSON.stringify(model));
          console.log(
            "permission",
            getLocationPermissions() ? "true" : "false"
          );

          if (getLocationPermissions()) {
            plus.android.requestPermissions(
              ["android.permission.ACCESS_FINE_LOCATION"],
              function (e) {
                if (e.deniedAlways.length > 0) {
                  // 权限被永久拒绝
                  // 弹出提示框解释为何需要定位权限，引导用户打开设置页面开启
                  if (brand === "Xiaomi") {
                    setLocationPermissions(1);
                  }
                }
                if (e.deniedPresent.length > 0) {
                  // 权限被临时拒绝
                  // 弹出提示框解释为何需要定位权限，可再次调用plus.android.requestPermissions申请权限
                  if (brand === "Xiaomi") {
                    setLocationPermissions(1);
                  }
                }
                if (e.granted.length > 0) {
                  // 权限被允许
                  _this.position();
                }
              },
              function (e) {
                console.log("Request Permissions error:" + JSON.stringify(e));
              }
            );
          }
        }

        if (device === "ios") {
          const cllocationManger = plus.ios.import("CLLocationManager");
          const enable = cllocationManger.locationServicesEnabled();
          console.log("enable: " + enable);
          const status = cllocationManger.authorizationStatus();
          console.log("status:" + status);
          if (enable && status !== 2) {
            // 定位打开
            _this.position();
          }
        }
      });
    },

    position() {
      const _this = this;
      if (navigator.geolocation) {
        //判断是否有这个对象
        navigator.geolocation.getCurrentPosition(function (pos) {
          var lng = pos.coords.longitude;
          var lat = pos.coords.latitude;
          var lnglat = {
            lon: lng,
            lat: lat,
          };
          getCity(lnglat).then((res) => {
            console.log("lnglat", lnglat);
            console.log("getCity", JSON.stringify(res));
            // const cityCode = res.data.regeocode.addressComponent.citycode;
            const city = res.result.result.addressComponent.city;
            const adCode =
              res.result.result.addressComponent.county_code - 156000000;
            setGeolocation("028", city, adCode);
            _this.nowcity = city;
            _local.set("city", city);
            _local.set("adCode", adCode);
            getCityCode({
              name: _local.get("city"),
            }).then((res) => {
              console.log("getCityCode", JSON.stringify(res));
              _this.cityCode = res.result.list[0].citycode;
              _local.set("cityCode", res.result.list[0].citycode);
            });
          });
        });
      } else {
        setGeolocation("028", "510107", "成都市", "武侯区");
      }
      // AMap.plugin("AMap.Geolocation", function () {
      //   var geolocation = new AMap.Geolocation({
      //     // 是否使用高精度定位，默认：true
      //     enableHighAccuracy: true,
      //     // 设置定位超时时间，默认：无穷大
      //     timeout: 10000,
      //     // 定位按钮的停靠位置的偏移量
      //     offset: [10, 20],
      //   });
      //   geolocation.getCurrentPosition(function (status, result) {
      //     if (status === "complete") {
      //       console.log("pos-res", JSON.stringify(result));

      //       onComplete(result);
      //     } else {
      //       onError(result);
      //     }
      //   });

      //   function onComplete(data) {
      //     console.log("data", JSON.stringify(data));
      //     if (data.status === 0 && data.info === "SUCCESS") {
      //       // console.log("data", JSON.stringify(data))
      //       // console.log("p",JSON.stringify(data.position))

      //       const position = data.position;
      //       let lng = JSON.stringify(position).split(",")[0].slice(1);
      //       let lat = JSON.stringify(position).split(",")[1].slice(0, -2);
      //       console.log(
      //         "经度",
      //         JSON.stringify(position).split(",")[0].slice(1)
      //       );
      //       console.log(
      //         "纬度",
      //         JSON.stringify(position).split(",")[1].slice(0, -2)
      //       );
      //       _local.set("lng", lng);
      //       _local.set("lat", lat);
      //       if (position) {
      //         getPosition({
      //           key: "454f3b0d0ab2155ed85e61ffeaf0c1a4",
      //           location: lng + "," + lat,
      //         }).then((res) => {
      //           console.log("逆地理解析", JSON.stringify(res));
      //           if (res.data.status == 1) {
      //             const cityCode = res.data.regeocode.addressComponent.citycode;
      //             const city = res.data.regeocode.addressComponent.city;
      //             const adCode = res.data.regeocode.addressComponent.adcode;
      //             setGeolocation(cityCode, city, adCode);
      //             _this.nowcity = city;
      //             _local.set("city", city);
      //             _local.set("adCode", adCode);
      //             _local.set("cityCode", cityCode);
      //             _this.cityCode = cityCode;
      //           }
      //         });
      //         setPosition(position);
      //       }
      //     }
      //   }

      //   function onError(data) {
      //     // 定位出错
      //     if (data) {
      //       console.log("geo-err:", JSON.stringify(data));
      //       setGeolocation("028", "510107", "成都市", "武侯区");
      //     }
      //   }
      // });
    },

    // banner广告
    // getAdData() {
    //   //获取广告数据
    //   plus.ad.getAds(
    //     {
    //       adpid: "120708240903", //替换为自己申请获取的广告位标识，此广告位标识仅在HBuilderX标准基座中有效
    //       width: "100%", //广告将要显示的宽度
    //       count: 3, //注意实际业务中建议一次请求3-5条广告，避免请求到相同的广告
    //     },
    //     function (e) {
    //       console.log("获取广告成功: " + JSON.stringify(e));
    //       if (!e || !e.ads || e.ads.length < 1) {
    //         console.log("无广告数据！");
    //       } else {
    //         console.log("更新广告数据！");
    //         this.adata = e.ads[0]; //这里只使用一条广告数据
    //       }
    //     },
    //     function (e) {
    //       console.log("获取广告失败: " + JSON.stringify(e));
    //     }
    //   );
    // },
  },
};
</script>

<style lang="less" scoped>
.updateTips {
  width: 85.9vw;
  // height: 95.4vw;
  position: relative;
  & > div {
    position: absolute;
    top: 45.3vw;
    left: 16vw;
    text-align: center;
    & > div:not(:nth-child(4)) {
      transform: translateX(16vw);
    }
    & > div:nth-child(1) {
      font-weight: bold;
      color: #1f1e21;
      margin-bottom: 3vh;
    }
    & > div:nth-child(2),
    & > div:nth-child(3) {
      font-size: 14px;
      color: #7f7e86;
      margin-bottom: 3vh;
    }
    & > div:nth-child(4) {
      margin-top: 3vh;
      transform: translate(16vw, 3vh);
      button {
        color: #fff;
        background-color: #45b7cb;
        text-align: center;
        border-radius: 15px;
        border: 0;
        font-size: 12px;
        width: 25.3vw;
        height: 8vw;
      }
    }
  }
  img {
    width: 100%;
  }
}
.fixImg {
  img:nth-child(1) {
    position: fixed;
    right: 0;
    bottom: 85px;
    width: 74px;
    height: 70px;
  }
}
.my-swipe {
  height: 50px;
  // line-height: 45px;
  .van-swipe-item {
    display: flex;
    align-items: center;
    div {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
.news {
  display: flex;
  align-items: center;
  width: 92vw;
  margin: 10px 4vw 20px;
  padding: 10px;
  background-color: #fafafa;
  box-sizing: border-box;
  border-radius: 5px;
  & > div:nth-child(1) {
    width: 32px;
    min-width: 32px;
    font-size: 15px;
    font-weight: bolder;
    div:first-child {
      color: #333333;
    }
    div:last-child {
      color: #d43b33;
    }
  }
  & > div:nth-child(2) {
    font-size: 25px;
    color: #d43b33;
    margin: 0 2vw;
  }
  & > div:nth-child(3) {
    font-size: 13px;
    // div {
    //   overflow: hidden;
    //   text-overflow: ellipsis;
    //   display: -webkit-box;
    //   -webkit-line-clamp: 1;
    //   -webkit-box-orient: vertical;
    //   margin-top: 3px;
    // }
  }
}
.serach {
  padding: 5px 15px 5px;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  .nosign {
    transform: translateX(-10.6vw) !important;
  }
  .sign {
    font-size: 12px;
    font-weight: bold;
    color: #ff9b33;
  }
  > span {
    color: #333;
    font-size: 15px;
    font-weight: bold;
    // width: 50px;
    margin-top: 8px;
  }
  .input2 {
    transform: translateX(-9vw);
  }
  .input,
  .input2 {
    display: block;
    height: 32px;
    border: 1px solid #eaeaea;
    border-radius: 20px;
    text-indent: 1em;
    background-color: #fff;
    color: #ccc;
    width: 60%;
    font-size: 13px;
    box-shadow: 2px 2px 1px #eee;
    padding-left: 18px;
    margin-top: 8px;
    ::placeholder {
      color: #ccc;
    }
  }
  .van-icon {
    margin: 0 5px;
  }
  .icons {
    width: 14px;
    margin: 0;
    position: absolute;
    left: 28%;
    top: 16px;
    margin-top: 8px;
  }
}
.swiperimg {
  text-align: center;
  margin: 5px 15px;
  img {
    display: inline-block;
    border-radius: 10px;
    width: 100%;
  }
  .shadow {
    box-shadow: 3px 5px 12px -2px #333;
  }
}
.menu {
  margin-bottom: 15px;
  padding: 0 12px 0;
  background-color: white;
  box-sizing: border-box;
  border: 1px solid #f3f5f7;
  .part {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-radius: 10px;
    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 13px;
      color: #333;
      // width: 90px;
      img {
        margin-bottom: 5px;
        width: 40px;
        height: 40px;
      }
    }
  }
}
.show {
  .activity {
    // padding: 10px;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    border-radius: 10px;

    .rpart {
      width: 100%;
      display: flex;
      // flex-direction: column;
      justify-content: space-evenly;
      margin-bottom: 10px;
      > div {
        img {
          width: 44.8vw;
          height: 23.4vw;
        }
      }
    }
  }
  .depart {
    margin: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    > div {
      width: 95%;
      font-size: 18px;
      color: #333;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      span {
        margin: 0 15px;
        font-size: 16px;
        font-weight: bold;
        box-sizing: border-box;
      }
      // span:hover {
      //   font-size: 18px;
      //   font-weight: 900;
      //   color: #46b8cb;
      //   padding-bottom: 3px;
      //   border-bottom: 2px solid #46b8cb;
      // }
      .active {
        font-weight: 900;
        color: #46b8cb;
      }
    }
  }
  .bottomline {
    font-size: 13px;
    color: gray;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 15px;
  }
  .housepart {
    margin: 0 15px;
    padding: 0 10px;
    background-color: #fff;
    border-radius: 10px;
    .house {
      display: flex;
      padding: 15px 0;
      border-bottom: 1px solid #f1f1f1;
      .intrduce {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        width: 190px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        .title1 {
          font-size: 16px;
          font-weight: 550;
          color: #333333;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .title2 {
          width: 190px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 12px;
          color: #666;
          span {
            margin: 0 2px;
          }
        }
        .tips {
          span {
            font-size: 10px;
            display: inline-block;
            margin-right: 5px;
            padding: 3px;
            border: 0;
            background-color: #ebfafd;
            color: #5eb9d0;
            border-radius: 5px;
          }
        }
        .title3 {
          color: #d43b33;
          font-size: 16px;
          font-weight: bold;
          span {
            font-size: 12px;
            margin-left: 3px;
          }
        }
      }
    }
    .house2 {
      padding: 15px 0;
      background-color: #fff;
      display: flex;
      border-bottom: 1px solid #f1f1f1;
      img {
        width: 121px;
        height: 112px;
        min-width: 121px;
        max-width: 121px;
        border-radius: 5px;
      }
      .intrduce {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        width: 190px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        .title1 {
          font-size: 16px;
          font-weight: 550;
          color: #333333;
          overflow: hidden;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .title2 {
          font-size: 12px;
          color: #a0a0a0;
          span {
            margin: 0 2px;
          }
        }
        .tips {
          span {
            font-size: 10px;
            display: inline-block;
            margin-right: 5px;
            padding: 3px;
            border: 0;
            background-color: #ebfafd;
            color: #5eb9d0;
            border-radius: 5px;
          }
        }
        .title3 {
          color: #d43b33;
          font-size: 16px;
          font-weight: bold;
          span {
            color: #999;
            font-size: 12px;
            margin-left: 6px;
          }
        }
      }
    }
    .up {
      margin: 0px !important;
      font-size: 12px;
      vertical-align: super;
      transform: scale(calc(10 / 12));
    }
  }
}
.nohouse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin: 0 15px;
  padding-bottom: 30px;
  img {
    margin-top: 20px;
    width: 200px;
  }
  div {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
  }
}
.first {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000000;
  width: 100%;
  height: 100%;
  background-color: #fff;
  .firstswiper {
    width: 100%;
    height: 100%;
    .swiper-slide {
      text-align: center;
      position: relative;
    }
    img {
      width: 100%;
      height: 100%;
    }
    .passfirst {
      position: absolute;
      top: 25px;
      right: 25px;
      height: 28px;
      width: 50px;
      line-height: 28px;
      text-align: center;
      border: 1px solid #f1f1f1;
      color: #ccc;
      font-size: 13px;
      border-radius: 15px;
    }
    .outfirst {
      position: absolute;
      bottom: 60px;
      left: 50%;
      height: 41px;
      width: 180px;
      line-height: 41px;
      text-align: center;
      border: 2px solid #8aaef8;
      color: #8aaef8;
      font-size: 18px;
      border-radius: 15px;
      margin-left: -90px;
      box-shadow: 0px 5px 10px -2px #8aaef8;
    }
  }
}
/deep/.van-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}
/deep/.van-popup {
  background-color: rgba(255, 255, 255, 0);
  .van-popup__close-icon {
    color: #333;
  }
}
.newup {
  .house {
    background-color: #fff;
    margin: 0 15px;
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #f1f1f1;
    img {
      width: 121px;
      height: 112px;
      min-width: 121px;
      max-width: 121px;
      border-radius: 5px;
    }
    .intrduce {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 10px;
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      .title1 {
        font-size: 16px;
        font-weight: 550;
        color: #333333;
      }
      .title2 {
        font-size: 12px;
        color: #a0a0a0;
        span {
          margin: 0 2px;
        }
      }
      .tips {
        span {
          font-size: 10px;
          display: inline-block;
          margin-right: 5px;
          padding: 3px;
          border: 0;
          background-color: #ebfafd;
          color: #5eb9d0;
          border-radius: 5px;
        }
      }
      .title3 {
        color: #d43b33;
        font-size: 16px;
        font-weight: bold;
        span {
          font-size: 12px;
          margin-left: 3px;
        }
      }
    }
  }
}
</style>
